<template>
  <div class="app-container">
    <XTablePage
    ref="tablePage"
              :columnsList="columnsList"
             :apiUrl="'/boss/teacher-account/list'"
              :method="'post'"
              :formConfig="getFormConfig"
              @toolbarButtonClickEvent="toolbarButtonClickEvent"
              :toolButtons="tools"
              :openForm="false"
              :export="false"
              :toolbarConfig="true">
              <template #actions="{ row }">
                    <el-link
                       size="medium"
                      type="primary"
                      icon="el-icon-edit"
                      @click="btnEidt(row)"
                    >编辑</el-link>

                <!-- <el-link
                size="medium"
                type="danger"
                icon="el-icon-delete"
                @click="delItem(row)" >删除</el-link> -->
                   
      </template>
    </XTablePage>
           <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="500px">
      <el-form :model="ruleForm"  size="medium" :rules="rules" ref="ruleForm" label-width="70px" >

        <el-form-item label="用户名" prop="phone"> 
        <el-input v-model="ruleForm.phone" :disabled="ruleForm.id!=''"  maxlength="11" placeholder="请输入手机号"></el-input>
        </el-form-item>
         <el-form-item label="角色" prop="userRoleId"> 
            <el-select v-model="ruleForm.userRoleId" clearable style="width:100%" filterable placeholder="请选择">
                <el-option
                  v-for="item in selectList"
                  :key="item.id"
                  :label="item.roleName"
                  :value="item.id">
                </el-option>
              </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button  size="medium" icon="el-icon-close" @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" icon="el-icon-finished"  size="medium" :loading="loadingSave"
                       @click="submitForm('ruleForm')">确 定</el-button>
          </span>
    </el-dialog>
  </div>
</template>
<script>
import {changeAccountStatus,changeUSersStatus,deleteUserInfo,getRoleList,saveAccount} from '@/api/teachManage'
export default {
  name: 'systemUser',
  data() {
    return {
      columnsList: [
      {
         title: "序号",
         type: 'seq', 
         width: 60,
         fixed:'left',
         align:'center',
       },
        {field: 'userName',  title: '姓名'},
        {field: 'phone',  title: '预手机号码'},
        {field: 'roleName',  title: '角色'},
       {field: 'isLocked', title: '状态',
          slots: { default:(({row})=>{
            return [
            <el-switch
              v-model={row.isLocked}
              active-value={false}
              inactive-value={true}
              onChange={(value)=>{
                {/* this.$confirm('您确定要'+(value===true?'禁用':'启用')+'该用户？', '消息提示', {
                    }).then(() => {
                    }).catch(action => {
                        this.getDataList()
                    }); */}
                      changeUSersStatus({
                          id:row.id,
                          isLocked:value
                      }).then((res)=>{
                            if (res.success) {
                              this.$message.success("更改成功");
                            } else {
                              this.$message.error(res.message||"操作失败");
                            }
                            this.getDataList()
                            })
                   
              }}>
            </el-switch>
            ]
          }) 
         }
        },
        {field: 'alarmType',  title: '登录IP'},
        {field: 'updateTime',  title: '最近登录时间'},
        {field: 'createTime',  title: '创建时间'},
        {title: '操作', width: 220, fixed: "right", slots: {default: 'actions'}}
      ],
      tools: [
          { code: 'btn-download', name: '添加', icon: 'el-icon-plus', status: 'primary' }
        ],   
       rules: {
        userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        roleId: [{ required: true, message: '请输入角色', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
      },
      ruleForm: {userName:'',roleId:'',phone:'',userId:'',userType:2,isLocked:'YES'},
      dialogVisible: false,
      loadingSave:false,
      selectList:[],
      title:''
    }
  },
  computed: {
    getFormConfig(){
      return  {
        titleAlign: 'center',
        items: [
          {
            field: 'phone',
            title: '手机号',
            span: 4,
            itemRender: {name: '$input',  props: {placeholder: '请输入手机号', clearable: true}}
          },
          {
            field: 'userName',
            title: '姓名',
            span: 4,
            itemRender: {name: '$input',  props: {placeholder: '请输入姓名', clearable: true}}
          },
          {
            field: 'userRoleId',
            title: '角色',
            span: 4,
            itemRender: {name: '$select',  props: {
              placeholder: '全部',options: this.selectList,
               clearable: true,
               optionProps:{
                 label:'roleName',
                 value:'id'
               }
              }}
          },
          {
            field: 'isLocked',
            title: '状态',
            span: 4,
            itemRender: {name: '$select',  props: {placeholder: '全部',options: [{label:'启用',value:'false'},{label:'禁用',value:'true'}], clearable: true}}
          },

          {
            align: 'center', 
            itemRender: {
              name: '$buttons',
              children: [
                {props: {type: 'submit', icon: 'el-icon-search', content: '查询', status: 'primary'}},
                {props: {type: 'reset', icon: 'el-icon-delete', content: '重置'}}]
            }
          }
        ]
      }
    }
  },
  created() {
    this.getSelectList()
  },
  methods: {
      getDataList(){
        this.$refs.tablePage.changeData({})
      },
      getSelectList(){
        getRoleList({
          limit: 999,
          dataType:1,
          page: 1
        }).then((res)=>{
          if(res.code===0){
            this.selectList = res.data
          }
        })
      },
      toolbarButtonClickEvent(code){
        this.dialogVisible=true
        this.ruleForm= {userName:'',userRoleId:'',phone:'',id:'',userType:2,isLocked:'YES'}
        this.title='新增'
      },
      btnEidt(row){
        this.dialogVisible=true
        this.ruleForm= {
          userName:row.userName,
          userRoleId:Number(row.userRoleId),
          phone:row.phone,
          id:row.id,
        }
        this.title='编辑'
      },
      delItem(row){
       this.$confirm('您确定要删除该用户？', '消息提示', {
        }).then(() => {
          deleteUserInfo([row.id]).then((res)=>{
            if (res.success) {
                  this.$message.success("删除成功");
                  this.getDataList()
                } else {
                  this.$message.error(res.message||"操作失败");
                }
          })
          }).catch(action => {
        });
    },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
              this.loadingSave = true
              let parms={} 
              if(this.ruleForm.id){
                 parms=this.ruleForm
              }else{
                parms ={
                  phone:this.ruleForm.phone,
                  roleId:this.ruleForm.userRoleId
                }
              }
              saveAccount(parms).then((res) => {
                  if (res.code === 0||res.success) {
                    this.$message.success("保存成功");
                    this.dialogVisible = false;
                    this.getDataList()
                  } else {
                    this.$message.error(res.message||"操作失败");
                  }
                   setTimeout(() => {
                      this.loadingSave=false
                    }, 500);
                });
           }
        })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>
<style lang="scss">
.app-container {
  padding: 10px;
  box-sizing: border-box;
  height: calc(100vh - 84px);
  overflow: auto;

  .type--datetime {
    z-index: 99 !important;
  }

  .imageSize {
    width: 300px;
    height: 150px;
  }
}
</style>
